<template>
  <div class="reportSet">
    <h3 class="reportHeader">森林火情辅助决策报告</h3>
    <div class="infoBox">
      <div class="jianbaoBox Box">
        <h4>一、简报信息</h4>
        <div class="jianbaoItem Item">
          <p>简报标题</p>
          <el-input v-model="reportInfo.template.headerBig"></el-input>
          <p>简报编号</p>
          <el-input v-model="reportInfo.template.reportCode"></el-input>
          <p>上报单位</p>
          <el-input v-model="reportInfo.template.reportUnit"></el-input>
          <p>编辑单位</p>
          <el-input v-model="reportInfo.template.reporter"></el-input>
          <p>联系电话</p>
          <el-input v-model="reportInfo.template.phone"></el-input>
        </div>
      </div>
      <div class="jianceBox Box">
        <h4>二、火情监测信息</h4>
        <p>时间</p>
        <el-input v-model="reportInfo.fireBase.time"></el-input>
        <p>地点</p>
        <el-input v-model="reportInfo.fireBase.place"></el-input>
        <p>坐标</p>
        <el-input class="small" v-model="reportInfo.fireBase.lat" style="width:150px"></el-input>
        <el-input class="small" v-model="reportInfo.fireBase.lon" style="width:150px; margin-right:30px;"></el-input>
        <p>距离</p>
        <el-input v-model="reportInfo.fireBase.distance"></el-input>
        <p>方位角</p>
        <el-input v-model="reportInfo.fireBase.angle"></el-input>
        <p>高程</p>
        <el-input v-model="reportInfo.fireBase.height"></el-input>
        <!-- <p>热点数</p>
        <el-input v-model="reportInfo.fireBase.hotNum"></el-input> -->
        <p>植被分布</p>
        <el-input v-model="reportInfo.fireBase.veg"></el-input>
      </div>
      <div class="fuheBox Box">
        <h4>三、火情复核信息</h4>
        <div class="describeBox">
          <p>复核情况:</p>
          <!-- <div class="describe" contenteditable="true" placeholder="请输入内容"></div> -->
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="reportInfo.checkRes.words">
          </el-input>
          <!-- <p>伤亡情况:</p> -->
          <div class="hurt">
            <span>死亡：</span><el-input v-model="reportInfo.checkRes.death" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
            <span>受伤：</span><el-input v-model="reportInfo.checkRes.hurt" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
            <span>失踪：</span><el-input v-model="reportInfo.checkRes.miss" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="btn">
      <p @click="showControl(true)">报告预览</p>
    </div>
    <PreviewReport v-if="showReport" :reportInfo="reportInfo"  @closePreview="showControl"></PreviewReport>
  </div>
</template>

<script>
import axios from 'axios'
import PreviewReport from './previewReport.vue'
export default {
  name: "reportSet",
  data() {
    return {
      showReport:false,//预览控制
      reportInfo: {
        fireId:null,
        // 简报模板数据
        template: {
          headerBig: "海南省森林防火火情简报",
          reportUnit: "海南省森林防火指挥部办公室",
          reportTime: '2021-06-12',
          headerSmall: "",
          reportCode: "20210401-001",
          reporter: "海南省森林防火指挥部办公室",
          phone: "183*******",
        },
        // 火点信息数据
        fireBase: {
          fireCode: "HD-20210401002",
          time: "2021年4月1日  00时37分",
          place: "海南省昌江岔河镇**村",
          lon: "119.51°E",
          lat: "19.50°N",
          distance: "10km",
          angle: "顺时针115°",
          height: "25m",
          hotNum: "3个",
          veg: "植被覆盖度45%，其中森林10%，草地90%",
        },
        // 火点复核数据
        checkRes: {
          words:
            "无",
          hurt: "死亡__人，受伤__人，失踪__人",
          death: "",
          hurt: "",
          miss: "",
        },
        // poi点数据
        poiList: [
          {
            group: "救援力量",
            children: [
              {
                type: "救援队伍",
                therader: [
                  { prop: "value1", label: "队伍类别" },
                  { prop: "value2", label: "队伍名称" },
                  { prop: "value3", label: "队伍人数" },
                  { prop: "value4", label: "联系电话" },
                ],
                dataList: [
                  { value1: "-", value2: "-", value3: "-", value4: "-" },
                ],
              },
              {
                type: "医疗保障资源",
                therader: [
                  { prop: "value1", label: "医疗资源类别" },
                  { prop: "value2", label: "医疗资源名称" },
                  { prop: "value3", label: "医疗资源位置" },
                  { prop: "value4", label: "联系电话" },
                ],
                dataList: [
                  { value1: "-", value2: "-", value3: "-", value4: "-" },
                ],
              },
            ],
          },
          {
            group: "救援物资",
            children: [
              {
                type: "救援物资",
                therader: [
                  { prop: "value1", label: "救援物质类别" },
                  { prop: "value2", label: "救援物质名称" },
                  { prop: "value3", label: "救援物质位置" },
                  { prop: "value4", label: "联系电话" },
                ],
                dataList: [
                  { value1: "-", value2: "-", value3: "-", value4: "-" },
                ],
              },
            ],
          },
          {
            group: "重点防护目标",
            children: [
              {
                type: "重点防护目标",
                therader: [
                  { prop: "value1", label: "防护目标类别" },
                  { prop: "value2", label: "防护目标名称" },
                  { prop: "value3", label: "防护目标位置" },
                  { prop: "value4", label: "联系电话" },
                ],
                dataList: [
                  { value1: "-", value2: "-", value3: "-", value4: "-" },
                ],
              },
            ],
          },
        ],
        // 专题图数据
        imgUrl: "",
        // imgUrl:`${globalUrl.BASE_URL}/thematic/7569e7b9-b50f-4836-983d-a3c93dd0e26b.png`,
        imgId: null,
        // imgId:32,
      },
    };
  },
  components:{
    PreviewReport,
  },
  computed:{
      fireId(){
          return this.$store.state.reportFireId
      }
  },
  watch:{
    fireId:{
        handler(val){
            console.log(val)
            this.getFireData();
        },
        immediate:true
    }
  },
  mounted(){
    let timeobj = this.initTime();
    this.reportInfo.template.reportTime = timeobj.year + "年" + this.dateFormate(timeobj.month) + "月" + this.dateFormate(timeobj.day) + "日"
  },
  methods:{
    // 报告预览控制按钮
    showControl(type){
      console.log(type)
      this.showReport = type
    },
    // 获取火点详情
    async getFireData(){
      // 获取火点编号
      let timeobj = this.initTime();
      this.reportInfo.template.reportTime = timeobj.year + "年" + this.dateFormate(timeobj.month) + "月" + this.dateFormate(timeobj.day) + "日"
      let resa = await axios.get(`${window.huoqingApiUrl}/api/special-report/fire/countByDay`);
      let sortRes = resa.data
      console.log(sortRes)
      sortRes++;
      let sort = sortRes < 10 ? `00${sortRes}` : sortRes < 100 ? `0${sortRes}` : sortRes
      this.reportInfo.template.reportCode = timeobj.year + this.dateFormate(timeobj.month) + this.dateFormate(timeobj.day) + '-' + sort;


      let res = await axios.get(`${window.huoqingApiUrl}/task/firePointDetail`,{params: { id: this.fireId }})
      console.log(res)
      let fireRes = res.data
      this.reportInfo.fireBase.fireCode = fireRes.code;
      this.reportInfo.fireBase.time = fireRes.observeTime.replace("-", "年").replace("-", "月").replace(" ", "日 ").replace(":", "时").replace(":", "分") + '秒';
      this.reportInfo.fireBase.place = fireRes.place;
      this.reportInfo.fireBase.lon = fireRes.longitude;
      this.reportInfo.fireBase.lat = fireRes.latitude;
      this.reportInfo.fireBase.distance = fireRes.distance + 'Km';
      this.reportInfo.fireBase.angle = fireRes.direction + '°';
      this.reportInfo.fireBase.height = fireRes.elevationAver + 'm';
      this.reportInfo.fireBase.hotNum = fireRes.hotspot;
      let all = fireRes.gfAver ? fireRes.gfAver + '%' : '未知'
      let senlin = fireRes.forestPercent ? fireRes.forestPercent + '%' : 0;
      let caodi = fireRes.lawnPercent ? fireRes.lawnPercent + '%' : 0;
      let nongtian = fireRes.farm ? fireRes.farm + '%' : 0;
      let guanmu = fireRes.bush ? fireRes.bush + '%' : 0;
      let chengshi = fireRes.city ? fireRes.city + '%' : 0;
      let veg = `植被覆盖度${all}, 其中森林${senlin},草地${caodi},农田及自然植被${nongtian},灌木${guanmu},城市或荒漠${chengshi}`
      this.reportInfo.fireBase.veg = veg;
      this.reportInfo.fireId = this.fireId;
    },
    // 初始化时间
    initTime(){
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return {
        year:year,
        month:month,
        day:day
      }
    },
    // 日期格式化
    dateFormate(date){
      if(date < 10){
          return '0' + date;
      }else{
          return date
      }
    },
  },
};
</script>
<style lang="stylus">
    .el-input__inner, .el-textarea__inner{
        
        background: rgba(16, 34, 67, 0.5);
        border: 1px solid rgba(23, 208, 255, 0.5);
        color:#fff;
    }
</style>
<style lang="stylus" scoped>
.reportSet {
  width: 350px;
  height:850px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  .reportHeader{
      height:30px;
      line-height:30px;
      margin-bottom:5px;
        font-size:vw(18);
        text-align :center;

  }
  .infoBox{
    flex: 1;
    overflow: auto;
    .Box {
      text-align: left;
      h4 {
        font-weight: 100;
        line-height:40px;
        font-size:16px;
      }
    }
  }
  .btn{
    p{
      cursor: pointer;
      float:right;
      border:1px solid #ddd;
      text-align:center;
      height:30px;
      line-height:30px;
      width:100px;
      margin-top:20px;
    }
  }
}
</style>